<template>
    <div>
        <ul class="menu-content user-touch" v-if="goodsClassifyList && goodsClassifyList.length > 0 ">
            <li class="menu-item displayFlex flexCenter" :class="{active:0 == selectIndex}"  @click="choiseClassify(0,-1)">
                全部
            </li>
            <li v-for="(value,key) in goodsClassifyList" class="menu-item displayFlex flexCenter" :class="{active:key + 1 == selectIndex}"
                @click="choiseClassify(value.parentClass.classId,key)" >
                <span>{{value.parentClass.className}}</span>
            </li>
        </ul>
        <ul class="menu-content" v-else>
            <li class="menu-item displayFlex flexCenter" :class="{active:0 == selectIndex}"  @click="choiseClassify(0,-1)">
                全部
            </li>
        </ul>
    </div>
</template>

<script>
    export default {
        name: "GoodsMenus",
        props:{
            goodsClassifyListProp:{
                type:Array
            },
            goodsMsgListProp:{
                type:Array
            }
        },
        data(){
            return{
                selectIndex:0,//菜单的选中状态
                goodsClassifyList:[],
                goodsMsgList:[],
            }
        },
        mounted(){
            this.goodsClassifyList = this.goodsClassifyListProp;
            this.goodsMsgList = this.goodsMsgListProp;
        },
        methods:{
            choiseClassify(classId,index){
                this.selectIndex = index + 1;
                this.$emit('choiseClassify',classId,index);
            },
            toSwiperIndex(index){
                /*animate去中间*/
                let srollLeft = this.$refs.itemImg[index].offsetLeft - 1.73 * parseInt(document.documentElement.clientWidth) / 375 * 100  ;
                $('.store-goods-ctop').animate({'scrollLeft': srollLeft}, 400);
                this.$emit('toSwiperIndex',index)
            },
        },
        components:{
        },
        watch:{
            goodsClassifyListProp(val){
                this.goodsClassifyList = val;
            }
        }
    }
</script>

<style scoped lang="scss">
    .menu-content{
        max-height: 4.5rem;
        max-height: 68.5vh;
        overflow: auto;
    }
    .menu-item{
        padding: 0 .1rem;
        font-size: .14rem;
        font-weight: bold;
        width: .8rem;
        height: .6rem;
        box-sizing: border-box;
        border-left: 2px solid transparent;
    }
    .menu-item.active{
        color: #5D89E8;
        border-left: 2px solid #5D89E8;
    }
</style>